<template>
	<view class="row-column-center" :style="{height:maxHeight+'px'}">
		<view class="login-container row-center-center" >
			<u-image width="200rpx" height="200rpx" :src="src" shape="circle"></u-image>
			<view class="title">太白湖警务助理管理平台</view>
			<u-form class="loginForm">
				<u-form-item label="手机号" left-icon="account" border-bottom="false" label-width="150" >
					<u-input v-model="form.phone" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item label="密码" left-icon="lock" border-bottom="false" label-width="150" >
					<u-input v-model="form.pwd" type="password" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
			<view class="agreement">
				<u-checkbox v-model="agreement" @change="checkboxChange"></u-checkbox>
				<view class="agreement-text">阅读并同意以下协议《<view class="link" @click="pageActive('pages/login/fwxy')">服务协议</view>》</view>
			</view>
			<u-button @click="doLogin()" :disabled="submitBtn" type="primary">登录</u-button>
			<view class="version">{{version}}</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js';
	import {mapMutations} from 'vuex';
	const key = CryptoJS.enc.Latin1.parse('abcdef0123456789');
	export default {
		data() {
			return {
				version:this.$http.config.version,
				submitBtn:false,
				agreement:false,
				src: require("@/static/logo.png"),
				maxHeight:0,
				form: {
					phone: '',
					pwd: '',
				}
			}
		},
		methods: {
			pageActive(path){
				this.$u.route(path);
			},
			...mapMutations(['updateUserInfo']),
			doLogin(){
				this.submitBtn = true;
				var _this = this;
				let loginForm = {...this.form};
				if(this.validateFormData(this.form)){
					if(!this.agreement){
						this.submitBtn = false;
						return this.$u.toast('请认真阅读并同意勾选协议');
					} 
					loginForm.pwd = this.encrypted(this.form.pwd);
					this.$http.post('/check/login',loginForm).then(res=>{
						let msg = res.data.msg;
						let token = res.data.data;
						if(msg){
							_this.submitBtn = false;
							this.$refs.uToast.show({
								title: msg,
								type: 'error'				
								});
							return;
						}
						if(token){
							uni.setStorage({
								key:"userInfo",
								data:token.user
							});
							uni.setStorage({
								key:"tokenId",
								data:token.tokenId
							})
							_this.updateUserInfo(token.user);
							_this.$refs.uToast.show({
								title: "登录成功",
								type: 'success',
								callback: ()=>{
									uni.switchTab({
										url:'../index/index'
									})
								}
							});						
						}
					}).catch(err=>{
						this.submitBtn = false;
					})
				}
			},
			// 密码加密
			encrypted (pwd) {
				return CryptoJS.AES.encrypt(pwd, key, {
				  mode: CryptoJS.mode.ECB,
				  padding: CryptoJS.pad.Pkcs7
				}).toString();
			},
			// 表单数据简单校验
			validateFormData(form){
				let flag = true;
				let {phone,pwd} = form;
				if(phone===undefined||phone===''){
					this.$refs.uToast.show({
						title: '请填写手机号',
						type: 'error'				
						})
						flag = false;
					this.submitBtn = false;
					return flag;
				}
				if(pwd===undefined||pwd===''){
					this.$refs.uToast.show({
						title: '请填写登录密码',
						type: 'error'				
						})
						flag = false;
					this.submitBtn = false;
					return flag;
				}
				return flag;
			},
			checkHasLogin(uid){
				return new Promise((resolve,reject) =>{
					this.$http.get('/check/hasLogin',{params:{id:uid}}).then(res=>{
						let data = res.data.data;
						console.log(data);
						if(data==='200'){
							console.log("checkHasLogin未登陆过或登录异常，期待false");
							console.log(data);
							reject(false);
							
						}else{
							console.log("checkHasLogin已在别处登录，期待true");
							console.log(data);
							resolve(data);
						}
						
					})
				}) 
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.agreement = e.value;
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo') || '';
			console.log(userInfo);
			if(userInfo.id){
				// 检查是否在别处登录
				this.checkHasLogin(userInfo.id).then((resolve)=>{
					uni.removeStorageSync("userInfo");
					uni.removeStorageSync("tokenId");
					console.log("onLoad存在用户信息，已在别处登录，期待true");
					console.log(resolve);
					if(resolve==='301'){
						this.$refs.uToast.show({
							title: '登录已过期，请重新登录',
							type: 'warning'				
						})
					}else{
						this.$refs.uToast.show({
							title: '该账号已在别处登录',
							type: 'success'				
						})
					}
				},(reject)=>{
					console.log("onLoad存在用户信息，尚未在别处登录，期待false");
					console.log(reject);
					this.updateUserInfo(userInfo);
					uni.switchTab({
						url:'../index/index'
					})
				});
				
			}
			this.maxHeight = uni.getSystemInfoSync().windowHeight
		}
	}
</script>

<style lang="scss" scoped>
	.login-container{
		width: 100%;
		padding:15px;
	}
	.loginForm{
		width: 100%;
		margin:20rpx auto;
	}
	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
		
		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
	.link{
		color: #2979FF;
		display: inline-block;
	}
	.title{
		font-size: 40rpx;
		line-height: 3;
		font-weight: 1000;
	}
	.version{
		color: #cccccc;
		font-size: 12px;
		position: absolute;
		bottom: 30rpx;
	}
</style>
